<template>
  <div>
    <a-modal
      :title="title"
      :visible="visible"
      :confirmLoading="loading"
      :isdouble="isdouble"
      width="1000px"
      @ok="()=> $emit('cancel')"
      @cancel="()=> $emit('cancel')"
    >
      <div>
        <a-row>
          <a-col class="expert" :md="6" :sm="6">
            <a-form>
              <a-form-item>
                <!-- <modal></modal> -->
                <a-tree
                  :replaceFields="Modifyfield"
                  @select="getTableData"
                  :tree-data="org"
                  default-expand-all
                  :default-selected-keys="['0-0-0']"
                ></a-tree>
              </a-form-item>
            </a-form>
          </a-col>
          <a-col :md="1" :sm="1"></a-col>
          <a-col :md="17" :sm="17">
            <a-row>
              <a-col :md="24" style="margin-bottom:20px">
                <a-input-search placeholder="员工名称/电话号码/员工编号"  v-model="content" enter-button @search="onSearch"></a-input-search>
              </a-col>
            </a-row>
            <a-button
              v-show="isAdd"
              type="primary"
              style="margin-bottom:10px"
              @click="getExternal"
            >添加外部人员</a-button>
            <div style="margin:10px 0" v-show="!isAdd">
              参与人名称：
              <BaseInput
                style="width:30%"
                v-model="outside"
                placeholder="请输入外部参与人员"
                :maxLength="maxLength"
                @change="editError"
              ></BaseInput>
              <a-button type="primary" style="margin-left:20px" @click="getOutside">添加</a-button>
              <a-button style="margin-left:20px" @click="cancel">取消</a-button>
            </div>
            <p v-show="addError" style="margin:10px 90px;color:red;">请填写正确名称！</p>
            <s-table
              ref="table"
              size="default"
              rowKey="id"
              :columns="columns"
              :data="loadData"
              bordered
              :alert="true"
              show-size-changer
              show-quick-jumper
              showPagination="auto"
            >
              <span slot="action" slot-scope="text, record">
                <template>
                  <a @click="handleAdd(record)">添加</a>
                </template>
              </span>
            </s-table>
          </a-col>
        </a-row>
      </div>
    </a-modal>
  </div>
</template>

<script>
import { getOrganization, getOrgPersonnel } from '@/api/achievementsManage'
import { STable } from '@/components'
const columns = [
  {
    title: '员工名称',
    dataIndex: 'name',
    key: 'name'
  },
  {
    title: '员工编号',
    dataIndex: 'jobNum',
    key: 'jobNum'
  },
  {
    title: '电话号码',
    dataIndex: 'phoneNum',
    key: 'phoneNum'
  },
  {
    title: '职称',
    dataIndex: 'posts.name',
    key: 'posts'
  },
  {
    title: '操作',
    width: '100px',
    fixed: 'right',
    scopedSlots: { customRender: 'action' }
  }
]
export default {
  name:'a'+ Date.now(),
  data() {
    return {
      Modifyfield: {
        children: 'children',
        title: 'label',
        id: 'id'
      },
      personnelTable: [],
      ID: undefined,
      columns: columns,
      queryParam:{},
      loadData: parameter => {
        this.queryParam.orgId = this.ID
        return getOrgPersonnel(this.queryParam).then(res => {
          return res
        })
      },
      isAdd: true,
      maxLength: 10,
      outside: undefined,
      Personnel: [],
      doublePersonnelList: [],
      content:undefined,
      addError:false,
      org:[]
    }
  },
  components: {
    STable
  },
  props: {
    visible: {
      type: Boolean,
      required: true
    },
    loading: {
      type: Boolean,
      default: () => false
    },
    title: {
      type: String,
      default: () => '添加参与人'
    },
    isdouble: {
      type: Boolean,
      default: () => false
    }
  },
  created(){
    getOrganization().then(res=>{
      this.org = res
      console.log(this.org)
      this.ID = res[0].children[0].id
    })
  },
  methods: {
    handleAdd(record) {
      if (!this.$props.isdouble) {
        this.Personnel.push({
          name: record.name,
          id:record.id
        })
        this.$emit('addPersonnel', this.Personnel)
      } else {
        this.doublePersonnelList.push({
          name: record.name
        })
        this.$emit('addDoublePersonnel', this.doublePersonnelList)
      }
    },
    handleOk(e) {
      this.confirmLoading = true
      setTimeout(() => {
        this.visible = false
        this.confirmLoading = false
      }, 2000)
    },
    getTableData(selectedKeys, info) {
      this.ID = info.selectedNodes[0].data.props.id
      this.$refs.table.refresh(true)
    },
    getExternal() {
      this.isAdd = false
    },
    cancel() {
      this.isAdd = true
    },
    getOutside() {
      let regexp=/^[\u4e00-\u9fa5]{1,6}(·[\u4e00-\u9fa5]{1,6}){0,2}$/;  //姓名正则
      if(!regexp.test(this.outside)){
          this.addError = true
         return false 
      }
      if (!this.$props.isdouble) {
        this.Personnel.push({
          name: this.outside
        })
        this.$emit('addPersonnel', this.Personnel)
        this.outside = undefined
      } else {
        this.doublePersonnelList.push({
          name: this.outside
        })
        this.$emit('addDoublePersonnel', this.doublePersonnelList)
        this.outside = undefined
      }
    },
    onSearch(){
      let regexp=/^[\u4e00-\u9fa5]{1,6}(·[\u4e00-\u9fa5]{1,6}){0,2}$/;  //姓名正则
      let mPattern = /^1[34578]\d{9}$/;  //手机号正则
      let posPattern = /^\d{3}$/; ;  //用户编号正则
      if(regexp.test(this.content)){
        this.queryParam.name = this.content
        this.queryParam.phoneNum  = this.queryParam.jobNum = undefined
      }
      if(mPattern.test(this.content)){
        this.queryParam.phoneNum = this.content
        this.queryParam.name = this.queryParam.jobNum = undefined
      }
      if(posPattern.test(+this.content)){
        this.queryParam.jobNum = this.content
        this.queryParam.name = this.queryParam.phoneNum = undefined
      }
      this.$refs.table.refresh(true)
      this.content = undefined
    },
    editError(){
      this.addError = false
    }
  }
}
</script>

<style lang='less'  scoped>
</style>
